<template>
	<li class="el-timeline-item">
		<div class="el-timeline-item__tail"></div>

		<div v-if="!$slots.dot"
			class="el-timeline-item__node"
			:class="[
				`el-timeline-item__node--${size || ''}`,
				`el-timeline-item__node--${type || ''}`
			]"
			:style="{
				backgroundColor: color
			}"
		>
			<i v-if="icon"
				class="el-timeline-item__icon"
				:class="icon"
			></i>
		</div>
		<div v-if="$slots.dot" class="el-timeline-item__dot">
			<slot name="dot"></slot>
		</div>

		<div class="el-timeline-item__wrapper">
			<div v-if="!hideTimestamp && placement === 'top'"
				class="el-timeline-item__timestamp is-top">
				{{timestamp}}
			</div>

			<div class="el-timeline-item__content">
				<slot></slot>
			</div>

			<div v-if="!hideTimestamp && placement === 'bottom'"
				class="el-timeline-item__timestamp is-bottom">
				{{timestamp}}
			</div>
		</div>
	</li>
</template>

<script>
	export default {
		name: 'ElTimelineItem',
		inject: ['timeline'],
		props: {
			timestamp: String,
			hideTimestamp: {
				type: Boolean,
				default: false
			},
			placement: {
				type: String,
				default: 'bottom'
			},
			type: String,
			color: String,
			size: {
				type: String,
				default: 'normal'
			},
			icon: String
		}
	};
</script>